// 备忘详情，点击备忘列表中的卡片即可跳转到备忘详情页面
import React, { useState, useEffect } from 'react'
import './memorandum-detail.scss'
import { match, Link, RouteComponentProps } from 'react-router-dom'
import { serviceGetMemorandumById } from '../../../request/memorandum'
import { LeftOutlined, EditOutlined } from '@ant-design/icons'
import { Spin } from 'antd'

const defaultTitle = '无标题'

type Props = {
  computedMatch: match<any>
} & RouteComponentProps

const MemorandumDetial: React.FC<Props> = function ({
  computedMatch,
  history,
}: Props) {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  const [loading, setLoading] = useState(true)
  const id = computedMatch.params.id

  useEffect(() => {
    serviceGetMemorandumById(id)
      .then(res => {
        if (res.data.success) {
          const title = res.data.data.title || defaultTitle
          document.title = title
          setTitle(title)
          setContent(res.data.data.html)
        }
      })
      .finally(() => setLoading(false))
  }, [id])

  return (
    <Spin spinning={loading}>
      <div className="memorandum-detail">
        <div className="tool-bar">
          <LeftOutlined
            className="icon-left"
            onClick={history.goBack}
          ></LeftOutlined>
          <Link className="edit" to={`/home/memorandum/update/${id}`}>
            <EditOutlined title="编辑"></EditOutlined>
          </Link>
        </div>
        <h1 className="title">{title}</h1>
        <div
          className="markdown-body tui-editor-contents"
          dangerouslySetInnerHTML={{ __html: content }}
        ></div>
      </div>
    </Spin>
  )
}

export default React.memo(MemorandumDetial)
